<template>
  <div id="index-l">
    
    <!-- 安全生产天数 -->
    <div class="index-l-1 index-l-0">
        <ul class="index-ul">
            <div class="top-s" style="font-size: 14px;">安全生产天数</div>
            <div class="set-con set-flex">
                <!-- <div class="index-c-txt">
                    <div class="index-c-txt-con">
                        <span class="index-c-txt-con-s01">18698<i>㎡</i></span>
                        <span class="index-c-txt-con-s02">总面积</span>
                    </div>
                    <div class="index-c-txt-con">
                        <span class="index-c-txt-con-s01">8668<i>人</i></span>
                        <span class="index-c-txt-con-s02">总人数</span>
                    </div>
                    <div class="index-c-txt-con">
                        <span class="index-c-txt-con-s01">25<i>栋</i></span>
                        <span class="index-c-txt-con-s02">建筑数量</span>
                    </div>
                </div> -->
                <div class="index-li">
                    <li v-for="(item , index) in dataList" :key="index">
                        <div class="index-l-1-n">
                            <span :style="{ color: item.sizeColor }" style="height: 3px;font-size: 24px;">{{item.num}}</span>
                            <div class="icon-s">
                                <img :src="item.srcImg" />
                            </div>
                            <p>{{ item.title }}</p>
                        </div>
                    </li>
                </div>
            </div>
        </ul>
    </div>

    <!-- 人事行政 -->
    <div class="index-l-2 index-l-0">
        <ul class="index-ul">
            <div class="top-s" style="font-size: 14px;">人事行政</div>
            <div class="set-con new-s">

                <div class="tab-s">
                    <list-scroll class="box" :speed="0.3">
                        <div class="list">
                            <div class="item-s" v-for="(item,index) in dataListNum" :key="index">
                                <div class="index-r">
                                    <div class="index-r-title">
                                        <span>{{item.title}}</span>
                                        <p>{{item.con}}<i class="index-r-p">{{item.conNum}}</i></p>
                                    </div>
                                    <div class="index-r-s">
                                        <span>{{item.in}}<i>{{item.inNum}}</i></span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="index-r-s">
                                        <span>{{item.out}}<i style="color: #00E5FF;">{{item.outNum}}</i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </list-scroll>
                </div>

                <!-- <div class="index-r">
                    <div class="index-r-title">
                        <span>客流统计</span>
                        <p>现有人数<i class="index-r-p">2814</i></p>
                    </div>
                    <div class="index-r-s">
                        <span>进出场人次<i>5839</i></span>
                    </div>
                    <div class="line"></div>
                    <div class="index-r-s">
                        <span>出场人次<i style="color: #FFB300;">3045</i></span>
                    </div>
                </div>

                <div class="index-r">
                    <div class="index-r-title">
                        <span>人员通行统计</span>
                        <p>现有人数<i class="index-r-p">2814</i></p>
                    </div>
                    <div class="index-r-s">
                        <span>进出场人次<i>5839</i></span>
                    </div>
                    <div class="line"></div>
                    <div class="index-r-s">
                        <span>出场人次<i style="color: #FFB300;">3045</i></span>
                    </div>
                </div>

                <div class="index-r">
                    <div class="index-r-title">
                        <span>停车位统计</span>
                        <p>车位总数<i class="index-r-p">372</i></p>
                    </div>
                    <div class="index-r-s">
                        <span>空闲<i>159</i></span>
                    </div>
                    <div class="line"></div>
                    <div class="index-r-s">
                        <span>已用<i style="color: #FFB300;">213</i></span>
                    </div>
                </div>

                <div class="index-r">
                    <div class="index-r-title">
                        <span>人员通行统计</span>
                        <p>现有人数<i class="index-r-p">2814</i></p>
                    </div>
                    <div class="index-r-s">
                        <span>进出场人次<i>5839</i></span>
                    </div>
                    <div class="line"></div>
                    <div class="index-r-s">
                        <span>出场人次<i style="color: #FFB300;">3045</i></span>
                    </div>
                </div> -->

            </div>
        </ul>
    </div>

    <!-- 小型电芯关键指标达成率 -->
    <div class="index-l-4 index-l-0">
        <ul class="index-ul char">
            <div class="top-s" style="font-size: 14px;">小型电芯关键指标达成率</div>
            <div class="set-con">
                <!-- <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRef"></div> -->
                <div class="set-c">
                    <ul class="set-c-u">
                        <li class="set-c-u-img">
                            <img src="../assets/factory-min-1.png" />
                        </li>
                        <li class="set-c-u-c">
                            <div class="set-c-u-con set-c-u-top"><span>人数：</span><p>234</p></div>
                            <div class="set-c-u-con set-c-u-c"><span>线体数：</span><p>698</p></div>
                            <div class="set-c-u-con"><span>产能数：</span><p>1289</p></div>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
    </div>
  </div>

</template>

<script>
import bz from './img/bz.png'
// import * as echarts from 'echarts'
import ListScroll from "./listScroll"
export default {
  name: 'index-l',
  data() {
    return {
        dataList: [{
            num: '5', srcImg: bz , title: '本周' , sizeColor: '#00E5FF'
        },{
            num: '26', srcImg: bz , title: '本月' , sizeColor: '#00E5FF'
        },{
            num: '280', srcImg: bz , title: '本年' , sizeColor: '#00E5FF'
        }],
        dataListNum: [
            {title:'人员统计',con:'在职人员总数',conNum: 2814,in:'男性人数',inNum:1583,out:'女性人数',outNum:1231},
            {title:'客流统计',con:'每天访客统计',conNum: 8884,in:'进厂人次',inNum:5839,out:'出厂人次',outNum:3045},
            {title:'车辆信息',con:'每天园区进出厂车流量',conNum: 8884,in:'进厂车辆',inNum:5839,out:'出厂车辆',outNum:3045},
            {title:'宿舍信息',con:'宿舍入住情况',conNum: 2814,in:'空闲',inNum:1023,out:'已用',outNum:1791},
            {title:'会议室信息',con:'会议室使用情况',conNum: 300,in:'空闲',inNum:100,out:'已用',outNum:200},
            // {title:'楼宇信息',con:'园区楼宇信息',conNum: 372,in:'空闲',inNum:5839,out:'已用',outNum:3045},
            {title:'就餐数据',con:'每天就餐数据',conNum: 2000,in:'就餐人数',inNum:1760,out:'未就餐人数',outNum:240},
            {title:'人员统计',con:'在职人员总数',conNum: 2814,in:'男性人数',inNum:1583,out:'女性人数',outNum:1231},
            {title:'客流统计',con:'每天访客统计',conNum: 8884,in:'进厂人次',inNum:5839,out:'出厂人次',outNum:3045},
            {title:'车辆信息',con:'每天园区进出厂车流量',conNum: 8884,in:'进厂车辆',inNum:5839,out:'出厂车辆',outNum:3045},
            {title:'宿舍信息',con:'宿舍入住情况',conNum: 2814,in:'空闲',inNum:1023,out:'已用',outNum:1791},
            {title:'会议室信息',con:'会议室使用情况',conNum: 300,in:'空闲',inNum:100,out:'已用',outNum:200},
            // {title:'楼宇信息',con:'园区楼宇信息',conNum: 372,in:'空闲',inNum:5839,out:'已用',outNum:3045},
            {title:'就餐数据',con:'每天就餐数据',conNum: 2000,in:'就餐人数',inNum:1760,out:'未就餐人数',outNum:240},
        ]
    };
  },
  components: { ListScroll },
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        // that.initCharts()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },

    // initCharts(){
    //     let myChart = echarts.init(this.$refs.reachRef)
    //     window.addEventListener('resize',() => {
    //         myChart.resize()
    //     })
    //     let option = {
    //         tooltip : {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'line',
    //                 label: {
    //                     backgroundColor: '#6a7985'
    //                 }
    //             }
    //         },
    //         legend: {
    //             show: false,
    //             left: '99%',
    //             right: 0,
    //             top: '15%',
    //             orient: 'vertical',
    //             itemGap: 10, 
    //             itemWidth:20,
    //             itemHeight:12
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '15%',
    //             bottom: 0,
    //             top: 10,
    //             containLabel: true,
    //             borderColor: 'rgb(61,61,61)'
    //         },
    //         xAxis: {
    //             type: 'value',
    //             boundaryGap : true,
    //             // position: 'bottom',
    //             axisLine: {
    //                 show: false
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,0.6)",
    //                 margin: 10,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             }
    //         },
    //         yAxis: {
    //             type: 'category',
    //             data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                color: "rgba(255,255,255,1)"
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             },
    //             splitArea:{
    //                 show: false,
    //                 areaStyle:{
    //                     color: 'rgba(255,255,255,0.02)',
    //                 }
    //             },
    //         },
    //         series: [
    //             {
    //                 data: [16, 32, 46, 53],
    //                 type: 'bar',
    //                 showBackground: true,
    //                 backgroundStyle: {
    //                     color: 'rgba(255,255,255,0.1)'
    //                 },
    //                 barWidth:'30%',
    //                 label: {
    //                     show: true,
    //                     position: 'left',
    //                     offset: [],
    //                     formatter: '{c}%',
    //                     textStyle: {
    //                         color: '#14E0FF',
    //                         // fontSize: 14,
    //                     }
    //                 },
    //                 itemStyle: {
    //                     normal: {
    //                         color: new echarts.graphic.LinearGradient( 1, 0, 0, 0,[
    //                             {
    //                                 offset: 0, 
    //                                 color: 'rgba(0,229,255,1)'
    //                             },
    //                             {
    //                                 offset: 1, 
    //                                 color: 'rgba(0,229,255,0)'
    //                             }
    //                         ]),
    //                     }
    //                 },
    //             }
    //         ]
    //     }
    //     myChart.setOption(option)
    //     setTimeout(() => {
    //         let width = myChart.getWidth()
    //         if(width && width !== 0){
    //             let opt = myChart.getOption();
    //             let grid = opt.grid[0];
    //             let right = grid.right;
    //             let left = grid.left;
    //             right = width*parseFloat(right)/100;
    //             left = width*parseFloat(left)/100;
    //             let x = width-left-right;
    //             option.series[0].label.offset = [x-20,0]
    //         }
    //         return option && myChart.setOption(option)
    //     },200)
    // },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
    .set-c{
        width: 100%;
        .set-c-u{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .set-c-u-img{
                width: 70%;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    height: auto;
                    margin-top: -20px;
                    filter:opacity(70%);
                }
            }
            .set-c-u-top{
                margin-top: 40px!important;
            }
            .set-c-u-con{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-top: 10px;
                span{
                    display: block;
                    font-weight: 600;
                    font-size: 14px;
                    color: rgb(0, 229, 255);
                    margin-right: 4px;
                }
                p{
                    font-size: 14px;
                }
            }
        }
    }
}
.new-s{
    height: 93%;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 84%;
}
/*** 滚动条样式优化 */

#index-l{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .index-c-txt{
        width: 100%;
        text-align: center;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        flex-direction: row;
        .index-c-txt-con{
            width: 32%;
            span{
                width: 100%;
                display: block;
                text-align: center;
            }
            .index-c-txt-con-s01{
                color: #00E5FF;
                font-size: 24px;
                font-weight: bold;
                // font-style: italic;
                i{
                    font-size: 14px;
                }
            }
            .index-c-txt-con-s02{
                color: #FFFFFF;
                font-size: 14px;
                font-weight: bold;
                margin-top: 10px;
            }
        }
    }
    .index-l-0{
        height: 32.7%;
    }
    .index-l-1{
        height: 20%;
    }
    .index-l-2{
        height: 58%;
    }
    .index-l-4{
        height: 20%;
    }
    .char{
        height: 100%;
        .index-l-4-echarts{
            width: 100%;
            height: 100%;
        }
    }
    .index-ul{
        background: rgba($color: #005ABF, $alpha: 0.2);
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            // font-size: 14px;
            font-style: oblique;
            background: rgba($color: #005ABF, $alpha: 0.4);
        }
        // 安全生产天数
        .index-li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            li{
                width: 32%;
                img{
                    display: block;
                    margin: auto;
                    width: 54%;
                }
            }
            .index-l-1-n{
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    // font-size: 14px;
                    font-weight: 600;
                    margin-top:10px;
                }
                p{
                    width: 100%;
                    text-align: center;
                    margin-top: 8px;
                    // font-size: 14px;
                }
            }
        }

        // 人员信息
        .index-r{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            width: 96%;
            border: 1px solid rgb(2,123,236);
            margin: 10px auto 0 auto;
            .index-r-title{
                width: 40%;
                span{
                    display: block;
                    color: #00E5FF;
                    // font-size: 14px;
                    font-weight: 600;
                    font-style: oblique;
                    width: 100%;
                    text-align: center;
                    background: rgb(8 ,70 ,143);
                    padding: 5px 0;
                }
                p{
                    width: 100%;
                    // font-size: 14px;
                    text-align: center;
                    background: rgb(3 ,44 ,90);
                    padding: 5px 0;
                    .index-r-p{
                        font-weight: 600;
                        margin-left: 4px;
                    }
                }
            }
            .index-r-s{
                width: 30%;
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    i{
                        color: #00E5FF;
                        margin-left: 4px;
                    }
                }
            }
            .line{
                width: 1px;
                height: 24px;
                background: linear-gradient(to top, rgba($color: #0A275D, $alpha: 0) 0%,#00E5FF 50%, rgba($color: #0A275D, $alpha: 0) 100%);
            }
        }
    }

    .tab-s{
        width: 92%;
        height: 100%;
        margin: 10px auto 0 auto;
        overflow: hidden;
        .table-1{
            position: relative;
            width: 100%;
            text-align: center;
            // background: rgba($color: #153863, $alpha: 0.4);
            z-index: 1;
            th{
                text-align: center;
                width: 50%;
            }
        }

        .td-1,.td-2,.td-3{
            // width: 20%;
            height: 30px;
            line-height: 30px;
        }
        .td-4,.td-5{
            width: 20%;
            img{
                width: 20px;
                height: 20px;
                margin-top: 5px;
            }
        }
        .box {
            height: 98%;
            .list {
                width: 100%;
                .item-s {
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    color: rgb(21,136,170);
                    table-layout:fixed;
                    .item-s-c{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;
                        width: 50%;
                    }
                }
            }
        }
    }
}
</style>